/**
 * 响应式组件使用示例
 *
 * 演示Responsive组件、Show/Hide组件、Container和withResponsive HOC的用法
 */

import React, { useState } from 'react';
import { Card, Button, Divider } from 'antd';
import {
  Responsive,
  Show,
  Hide,
  Container,
  withResponsive,
  ResponsiveInjectedProps
} from '../components/Responsive/ResponsiveExports';
import { MenuOutlined, DesktopOutlined, MobileOutlined } from '@ant-design/icons';

/**
 * 示例1: Responsive组件 - 根据断点渲染不同内容
 */
export const ResponsiveExample: React.FC = () => {
  return (
    <Card title="Responsive组件示例" className="mb-4">
      <Responsive
        mobile={
          <div className="bg-blue-100 p-4 rounded">
            <MobileOutlined className="text-2xl mb-2" />
            <h3 className="font-bold">移动端视图</h3>
            <p>这是专为移动设备优化的内容</p>
          </div>
        }
        tablet={
          <div className="bg-green-100 p-4 rounded">
            <DesktopOutlined className="text-2xl mb-2" />
            <h3 className="font-bold">平板视图</h3>
            <p>这是专为平板设备优化的内容</p>
          </div>
        }
        desktop={
          <div className="bg-orange-100 p-4 rounded">
            <DesktopOutlined className="text-2xl mb-2" />
            <h3 className="font-bold">桌面端视图</h3>
            <p>这是专为桌面设备优化的内容，包含更多详细信息和功能</p>
          </div>
        }
      />

      <Divider />

      <pre className="bg-gray-100 p-2 rounded">
{`<Responsive
  mobile={<MobileView />}
  tablet={<TabletView />}
  desktop={<DesktopView />}
/>`}
      </pre>
    </Card>
  );
};

/**
 * 示例2: Show/Hide组件 - 条件显示
 */
export const ShowHideExample: React.FC = () => {
  return (
    <Card title="Show/Hide组件示例" className="mb-4">
      <div className="space-y-4">
        {/* 仅在移动端显示 */}
        <Show breakpoint="mobile">
          <div className="bg-blue-100 p-4 rounded border-2 border-blue-500">
            <p className="font-bold">仅移动端可见</p>
            <p>使用 {`<Show breakpoint="mobile">`}</p>
          </div>
        </Show>

        {/* 仅在桌面端显示 */}
        <Show breakpoint="desktop">
          <div className="bg-orange-100 p-4 rounded border-2 border-orange-500">
            <p className="font-bold">仅桌面端可见</p>
            <p>使用 {`<Show breakpoint="desktop">`}</p>
          </div>
        </Show>

        {/* 在移动端隐藏 */}
        <Hide breakpoint="mobile">
          <div className="bg-green-100 p-4 rounded border-2 border-green-500">
            <p className="font-bold">移动端隐藏</p>
            <p>使用 {`<Hide breakpoint="mobile">`}</p>
          </div>
        </Hide>

        {/* 使用自定义媒体查询 */}
        <Show when="(min-width: 1200px)">
          <div className="bg-purple-100 p-4 rounded border-2 border-purple-500">
            <p className="font-bold">宽屏可见 (≥1200px)</p>
            <p>使用 {`<Show when="(min-width: 1200px)">`}</p>
          </div>
        </Show>
      </div>

      <Divider />

      <pre className="bg-gray-100 p-2 rounded">
{`// 仅在移动端显示
<Show breakpoint="mobile">
  <MobileOnlyContent />
</Show>

// 在移动端和平板隐藏
<Hide breakpoint={['mobile', 'tablet']}>
  <DesktopFeature />
</Hide>

// 自定义媒体查询
<Show when="(min-width: 1200px)">
  <WideScreenContent />
</Show>`}
      </pre>
    </Card>
  );
};

/**
 * 示例3: Container组件 - 响应式容器
 */
export const ContainerExample: React.FC = () => {
  const [containerType, setContainerType] = useState<'responsive' | 'fixed' | 'fluid'>('responsive');

  return (
    <Card title="Container组件示例" className="mb-4">
      <div className="mb-4 space-x-2">
        <Button
          type={containerType === 'responsive' ? 'primary' : 'default'}
          onClick={() => setContainerType('responsive')}
        >
          响应式
        </Button>
        <Button
          type={containerType === 'fixed' ? 'primary' : 'default'}
          onClick={() => setContainerType('fixed')}
        >
          固定宽度
        </Button>
        <Button
          type={containerType === 'fluid' ? 'primary' : 'default'}
          onClick={() => setContainerType('fluid')}
        >
          流体
        </Button>
      </div>

      <Container type={containerType} className="bg-gray-100 border-2 border-dashed border-gray-400">
        <div className="p-4">
          <h3 className="font-bold mb-2">
            当前容器类型: {containerType}
          </h3>
          <p>
            {containerType === 'responsive' && '根据断点自动调整宽度和内边距'}
            {containerType === 'fixed' && '固定最大宽度1280px'}
            {containerType === 'fluid' && '100%宽度'}
          </p>
        </div>
      </Container>

      <Divider />

      <pre className="bg-gray-100 p-2 rounded">
{`// 响应式容器（推荐）
<Container type="responsive">
  <Content />
</Container>

// 固定宽度
<Container type="fixed" maxWidth="1280px">
  <Content />
</Container>

// 流体容器
<Container type="fluid">
  <Content />
</Container>`}
      </pre>
    </Card>
  );
};

/**
 * 示例4: withResponsive HOC
 */
interface MyComponentProps extends ResponsiveInjectedProps {
  title: string;
}

const MyComponentRaw: React.FC<MyComponentProps> = ({
  title,
  breakpoint,
  device,
  orientation,
  viewport
}) => {
  return (
    <Card title="withResponsive HOC示例" className="mb-4">
      <div className="space-y-2">
        <p><strong>标题:</strong> {title}</p>
        <p><strong>断点:</strong> {breakpoint}</p>
        <p><strong>设备类型:</strong> {device.isMobile ? '移动' : device.isTablet ? '平板' : '桌面'}</p>
        <p><strong>操作系统:</strong> {device.os}</p>
        <p><strong>浏览器:</strong> {device.browser}</p>
        <p><strong>屏幕方向:</strong> {orientation}</p>
        <p><strong>视口宽度:</strong> {viewport.width}px</p>
        <p><strong>视口高度:</strong> {viewport.height}px</p>
      </div>

      <Divider />

      <pre className="bg-gray-100 p-2 rounded text-sm">
{`interface MyComponentProps extends ResponsiveInjectedProps {
  title: string;
}

const MyComponent: React.FC<MyComponentProps> = ({
  title,
  breakpoint,
  device,
  orientation,
  viewport
}) => {
  return <div>...</div>;
};

export default withResponsive(MyComponent);

// 使用
<MyComponent title="我的页面" />
// 自动注入响应式props`}
      </pre>
    </Card>
  );
};

const MyComponent = withResponsive(MyComponentRaw);

/**
 * 示例5: 实际应用 - 响应式导航栏
 */
export const ResponsiveNavExample: React.FC = () => {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <Card title="实际应用：响应式导航栏" className="mb-4">
      <Responsive
        mobile={
          <div className="bg-blue-50 p-4 rounded">
            <div className="flex justify-between items-center mb-2">
              <h3 className="font-bold">移动端导航</h3>
              <Button
                icon={<MenuOutlined />}
                onClick={() => setMenuOpen(!menuOpen)}
              >
                菜单
              </Button>
            </div>
            {menuOpen && (
              <div className="mt-2 space-y-2">
                <div className="p-2 bg-white rounded">首页</div>
                <div className="p-2 bg-white rounded">产品</div>
                <div className="p-2 bg-white rounded">关于</div>
                <div className="p-2 bg-white rounded">联系</div>
              </div>
            )}
          </div>
        }
        desktop={
          <div className="bg-orange-50 p-4 rounded">
            <div className="flex justify-between items-center">
              <h3 className="font-bold">桌面端导航</h3>
              <div className="flex space-x-4">
                <a className="px-4 py-2 bg-white rounded hover:bg-blue-100">首页</a>
                <a className="px-4 py-2 bg-white rounded hover:bg-blue-100">产品</a>
                <a className="px-4 py-2 bg-white rounded hover:bg-blue-100">关于</a>
                <a className="px-4 py-2 bg-white rounded hover:bg-blue-100">联系</a>
              </div>
            </div>
          </div>
        }
      />

      <Divider />

      <pre className="bg-gray-100 p-2 rounded text-sm">
{`function ResponsiveNav() {
  const [menuOpen, setMenuOpen] = useState(false);

  return (
    <Responsive
      mobile={
        <>
          <Button onClick={() => setMenuOpen(!menuOpen)}>
            菜单
          </Button>
          {menuOpen && <MobileMenu />}
        </>
      }
      desktop={<DesktopNav />}
    />
  );
}`}
      </pre>
    </Card>
  );
};

/**
 * 完整示例页面
 */
export const ResponsiveComponentsExample: React.FC = () => {
  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">响应式组件完整示例</h1>

      <ResponsiveExample />
      <ShowHideExample />
      <ContainerExample />
      <MyComponent title="响应式注入示例" />
      <ResponsiveNavExample />
    </div>
  );
};

export default ResponsiveComponentsExample;
